<template>
	<view class="ImageView" v-if="ImageShow" style="">
		<!-- 如果使用中有问题  记得加上尝试（这里是原来就有的方法  后进过改造代码去掉的） -->
		<swiper class="swiper" :current="current" duration="500" vertical :style="styles" :disable-touch="!swiper"
			@transition="scale = false" @animationfinish="scale = true" @touchstart="handletouchstart"
			@touchend="handletouchend" @catchtouchmove="catchSwipeMove">
			<swiper-item v-for="item,index in imageList" :key="index">
				<view class="imageBox" @click="showclick">
					<view class="" style="display: flex;justify-content: flex-end;position: fixed;
    width: 100%;">

						<view class="edit" v-if="showEdit && !isShow" style="">
							<view @click.stop="()=>{}">
								<!-- 从地步报告tab进去的轮播图片 不显示   编辑页面进去的轮播图显示 -->
								<!-- 编辑 -->
								<image v-if="isEdit && item.newIsEnjoy==true" @click="toEdit(item)"
									style="margin-top: -10rpx; width: 55rpx;height: 55rpx;margin-right: 40rpx;"
									src="../static/bianji-off.png" mode="widthFix"></image>
								<image v-if="isEdit && item.newIsEnjoy!==true" @click="toEdit(item)"
									style="margin-top: -10rpx; width: 55rpx;height: 55rpx;margin-right: 40rpx;"
									src="../static/bianji-on.png" mode="widthFix"></image>
								<!-- 分享，提交 -->
								<image v-if="isSubmit && item.newIsEnjoy==true" @click="toShare(item)"
									style="width: 55rpx;height: 55rpx;margin-right: 40rpx;"
									src="../static/fixbtn/share1.png" mode="widthFix"></image>
								<image v-if="isSubmit && item.newIsEnjoy !==true" @click="toShare(item)"
									style="width: 55rpx;height: 55rpx;margin-right: 40rpx;"
									src="../static/fixbtn/share.png" mode="widthFix"></image>
								<!-- 下载 -->
								<image v-if="isUpload" @click="uploadClick(item,index)"
									style="width: 63rpx;height: 63rpx;margin-right: 20rpx;"
									src="../static/xiazai-on.png" mode="widthFix"></image>
								<!-- <uni-icons style="margin-right: 20rpx;" type="settings-filled" size="30"
									color="#fff"></uni-icons>
								<uni-icons  style="margin-right: 20rpx;" type="redo-filled" size="30"
									color="#fff"></uni-icons>
						
								<uni-icons style="margin-right: 20rpx;" type="pulldown" size="30"
									color="#fff"></uni-icons> -->
							</view>
						</view>
					</view>

					<view class="top" style="overflow: hidden;width: 100%;height: 100%;">
						<!-- <movable-area class="marea" scale-area>
							<movable-view class="mview" direction="all" damping="100" friction="2" :scale="false"
								scale-min="1" scale-max="8" :out-of-bounds="temporaryScaleValue!=1"
								:scale-value="scaleValue" :animation="animation" @click="dbclick" @change="changeMove"
								@scale="handleScale"> -->
						<image v-if="item.Mtype=='image'" class="image" :src="item.Murl" mode="widthFix"
							@click.stop="preview(item.Murl)" />
						<view class="play" v-if="item.Mtype=='video'&&localVideo" style="">
							<image @click.stop="toVideoView(item.Murl)" src="/static/play.png" mode=""></image>
						</view>
						<MyVideo v-if="item.Mtype=='video'&&!localVideo" :videoUrl="item.Murl"></MyVideo>
						<!-- </movable-view> -->
						<!-- </movable-area> -->
						<!-- 	<image v-if="item.Mtype=='image'" class="image" :style="{ transform: scaleImage}" :src="item.Murl"
							mode="aspectFit">
						</image> -->

					</view>

					<view style="" class="bottom" @touchmove.passive.stop="catchContentMove">
						<view v-for="(im,index) in item.PropData" :key="index">
							{{im.ControlName}}: {{im.DefaultValue}}
						</view>
						<view>
							描述 : {{item.Content}}
						</view>
					</view>

				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MyVideo from './videoIframe.vue'
	export default {
		components: {
			MyVideo
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			isEditImg: {
				type: Boolean
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			isUpload: {
				type: Boolean,
				default: false
			},
			isSubmit: {
				type: Boolean,
				default: false
			},
			parentObj: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				isPhotoAlbum: "",
				// 轮播图片是否显示分享下载等按钮图标
				isHideIcon: "",
				// 传递过来的当前图片行的数据
				info: {},
				scaleImage: 'scale(1)',
				scaleImageNumber: 1,
				translateLeft: "",
				translateLeftNumber: 0,
				translateRightNumber: 0,
				translateYTopNumber: 0,
				translateYBottomNumber: 0,
				localVideo: false,
				showEdit: true,
				text: '',
				// 当前所在滑块的 index
				current: 0,
				// 当前滑块图片的总数
				total: 0,
				ImageShow: false,
				styles: {
					position: 'fixed',
					width: '100vw',
					height: '100vh',
					backgroundColor: 'rgba(0,0,0,0.8)',
					top: 0,
					left: 0,
					zIndex: 9997
				},
				ImageUrl: '',
				imageList: [],
				PropData: [],
				moveStartX: '',
				touchNum: 0, //双击控制
				show: true, //动画控制
				fingers: false,
				swiper: true, //是否禁止用户 touch 操作
				scale: true,
				animation: true,
				scaleValue: 1,
				temporaryScaleValue: 1, //超出移动范围
				current_page: null,
				newArray: [],
				leftController: false,
				type: '',
				IsEnjoy: false,
				entityProjectXmRwIdObj: {} //存储需要更新缓存的对象
			};
		},
		methods: {
			//预览api
			preview(url) {
				uni.previewImage({
					urls: [url],
				})
			},
			//双击事件放大缩小
			dbclick() {
				// if (this.scaleValue == 4) {
				// 	this.scaleValue = 1;
				// } else {
				// 	this.scaleValue = 4;
				// }
				let curTime = new Date().getTime();
				let lastTime = this.touchNum;
				this.touchNum = curTime;
				let diff = curTime - lastTime;
				if (diff < 300) { //双击
					this.scaleValue = this.scaleValue === 1 ? 2 : 1
					clearTimeout(this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				} else { //单击
					this.lastTapTimeoutFunc = setTimeout(() => {
						this.show = !this.show
					}, 300);
				}
			},
			// 缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持
			handleScale(e) {
				this.temporaryScaleValue = e.detail.scale
				// console.log('开始放大了', this.temporaryScaleValue, e.detail.scale)
				clearTimeout(this.timer)
				if (e.detail.scale != 1) {
					this.swiper = false
				} else {
					this.timer = setTimeout(() => {
						this.scaleValue = 1
						this.swiper = true
					}, 200);
				}
				// console.log('是否禁止用户touch操作', this.swiper, this.scaleValue)
			},
			handletouchstart(e) {
				// console.log('获取handletouchstart方法长度', e,e.touches)

				// return
				// this.fingers = e.touches.length >= 2 ? true : false
				// this.moveStartX = e.changedTouches[0].clientX
				// console.log('获取handletouchstart坐标moveStartX',	this.moveStartX)
			},
			handletouchend(e) {

				// return  暂时不删除 后续需要打开
				// if (!this.swiper || this.fingers) {
				// 	return
				// }
				// let moveX = e.changedTouches[0].clientX - this.moveStartX
				// console.log('是否还有图片了moveXmoveXmoveX', moveX)
				// if (moveX > 20) { // && this.moveStartX < 75
				// 	// console.log('左滑');
				// 	if (this.current === 0) {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: '没有更多图片了'
				// 		})
				// 		return
				// 	}
				// 	//二次优化
				// 	if (this.current_page && this.current_page > 1 && this.current === 1 && !this.leftController) {
				// 		this.current_page--
				// 		this.plist = this.newArray[this.current_page - 1].concat(this.plist)
				// 		this.total = this.plist.length
				// 		this.current = this.page_size
				// 		return
				// 	}
				// 	this.current--
				// 	// 后续需要打开
				// 	// this.tabChange()
				// }
				// if (moveX < -20) { // && this.moveStartX > 300
				// 	// console.log('右滑');
				// 	if (this.current === this.total - 1) {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: '没有更多图片了'
				// 		})
				// 		return
				// 	}
				// 	//请求下一页
				// 	if (this.current_page && this.current === this.plist.length - 1 && this.current < this.total - 1) {
				// 		this.current_page++
				// 		uni.showLoading({
				// 			title: '图片加载中'
				// 		})
				// 		// //调用api 自己封装
				// 		// this.$api.get('list', {
				// 		// 	activity_id: this.activity_id,
				// 		// 	keywords: this.keywords,
				// 		// 	type_id: this.type_id,
				// 		// 	shooting_time: this.shooting_time,
				// 		// 	page_size: this.page_size,
				// 		// 	page: this.current_page,
				// 		// }, 'none').then(res => {
				// 		// 	this.plist = this.plist.concat(res.data.data);
				// 		// 	this.total = res.data.total
				// 		// 	this.index++
				// 		// 	this.leftController = this.index >= this.page_size
				// 		// })
				// 		// return
				// 	}
				// 	this.current++
				// 	// 后续需要打开
				// 	// this.tabChange()
				// }
			},
			// 拖动过程中触发的事件，event.detail = {x, y, source}
			changeMove(e) {
				this.scaleValue = this.temporaryScaleValue
				if (e.detail.source === 'touch-out-of-bounds' &&
					(e.detail.x > 0 || e.detail.x < (this.scaleValue > 1 ? (this.scaleValue < 2 ? -this.screen_width * this
						.scaleValue * 0.1 : -this.screen_width) : 0))) {

					this.scaleValue = 1
					this.swiper = true
					this.animation = false
					this.temporaryScaleValue = 1
					// 后续需要打开
					// this.tabChange(1)
				}
			},
			// // 水印高清图，查看原图
			// tabChange(e) {
			// 	if (this.tabIndex == e) {
			// 		return
			// 	}
			// 	//复原部分配置
			// 	this.scaleValue = 1
			// 	this.swiper = true
			// 	this.animation = true
			// 	this.temporaryScaleValue = 1

			// 	this.tabIndex = e || this.tabIndex
			// 	if (this.tabIndex == 1) {
			// 		this.info = this.plist[this.index]
			// 	}
			// 	if (this.tabIndex == 2) {
			// 		this.getImg()
			// 	}
			// },

			// 编辑图片
			editClick(item, index) {
				console.log('编辑图片', item, index)
				this.$emit('close', true)
				// uni.showTabBar()
				this.$emit('setEdit', '1')
				uni.navigateTo({
					url: '/pages/EditImage/EditImage?picture=' + item.Murl + '&type=' + this.type + '&index=' +
						index
				})
				setTimeout(() => {
					this.ImageShow = false
				}, 500)

			},

			// 下载轮播图图片
			uploadClick(item, index) {
				var that = this
				// console.log('下载', item, index)
				this.$Msg.tipLoading('下载中')
				// **************************************uni.downloadFile  H5跨域  需自行解决跨域问题*************************
				const downloadTask = uni.downloadFile({
					url: item.Murl,
					success: (res) => {
						// console.log('下载成功', res)
						if (res.statusCode == 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									that.$Msg.successToast('已保存到手机相册')
								},
								fail: function() {
									that.$Msg.toast('保存失败，请稍后重试')
								}
							});
							this.$Msg.hideLoading()
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					// console.log('下载进度' + res.progress);
					// console.log('已经下载的数据长度' + res.totalBytesWritten);
					// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				});
			},


			toVideoView(url) {
				uni.navigateTo({
					url: '/pages/video/video?src=' + url
				})
			},
			catchSwipeMove(e) {
				// 阻止默认行为
				e.preventDefault();
			},
			// 捕获滚动区域的滑动事件
			catchContentMove(e) {
				e.stopPropagation();
			},
			toEdit(obj) {


				let parentObj = this.parentObj.List.find(item => item.ProjectId == obj.ProjectId && item.Id == obj.TaskId)
				let sonObj = parentObj.TakeNotesList.find(item => item.Id == obj.TakeNotesId)
				if (sonObj.IsEnjoy) return this.showTips('当前数据已完成提交')

				this.$emit('close', true)
				uni.showTabBar()
				uni.navigateTo({
					url: `/pages/EditPage/EditPage?data=${encodeURIComponent(JSON.stringify(obj))}&type=3&pid=${obj.ProjectId}&id=${obj.TaskId}&reportType=${this.isEditImg}&xmId=${this.entityProjectXmRwIdObj.xmId}&rwId=${this.entityProjectXmRwIdObj.rwId}&xmName=${this.entityProjectXmRwIdObj.xmName}&rwName=${this.entityProjectXmRwIdObj.rwName}`
				})
				this.ImageShow = false
			},
			showclick() {
				console.log('点击了', )
				// 上下左右移动放大缩小初始化
				this.scaleImage = 'scale(1)'
				this.scaleImageNumber = 1
				this.translateLeft = ""
				this.translateLeftNumber = 0
				this.translateRightNumber = 0
				this.translateYTopNumber = 0
				this.translateYBottomNumber = 0
				this.$emit('close', true)
				this.ImageShow = false
				uni.showTabBar()
			},
			open(arr, current, showEdit, localVideo, type) {

				// let parentObj = this.parentObj.List.find(item => item.ProjectId == obj.ProjectId && item.Id == obj.TaskId)
				// let sonObj = parentObj.TakeNotesList.find(item => item.Id == obj.TakeNotesId)
				// if (sonObj.IsEnjoy) this.IsEnjoy

				this.type = type
				this.isHideIcon = showEdit
				// 判断是否显示下载分享图标
				if (showEdit == 'true+true') this.isHideIcon = true //显示下载图标
				this.ImageShow = true
				uni.hideTabBar()
				this.imageList = arr
				this.current = current || 0
				if (showEdit === false) this.showEdit = false
				else this.showEdit = true
				if (localVideo) this.localVideo = true
				else this.localVideo = false

				console.log('获取isPhotoAlbum', this.parentObj.List)
				if (this.parentObj.List) {
					this.imageList.forEach((item => {
						let parentObj = this.parentObj.List.find(v => v.ProjectId == item.ProjectId && v.Id ==
							item.TaskId)
						let sonObj = parentObj.TakeNotesList.find(m => m.Id == item.TakeNotesId)
						if (sonObj.IsEnjoy) {
							item.newIsEnjoy = sonObj.IsEnjoy
						}
					}))
				}


				console.log('打印imageViewCopyopen参数', this.imageList)
				// 获取图片
				// this.getPhoto(imageList,curent)

			},
			//获取照片
			getPhoto() {
				this.plist = this.data.data;
				this.current_page = this.data.current_page;
				this.total = this.data.total;
				if (!this.plist || this.plist.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '没有可展示的图片'
					})
				}


				//二次优化
				if (this.current_page) {
					let index = 0
					let subGroupLength = this.page_size
					this.newArray = []
					while (index < this.plist.length) { //按页分组
						this.newArray.push(this.plist.slice(index, index += subGroupLength));
					}
					this.newArray.forEach((item, index) => {
						for (let i = 0; i < item.length; ++i) {
							if (this.img_id == item[i].id) {
								this.current_page = index + 1 //重新赋值
								if (i === 0 && index > 0) {
									this.index = this.page_size
									this.plist = this.newArray[index - 1].concat(item)
									this.leftController = true
								} else {
									this.index = i
									this.plist = item
								}
								this.info = item[i]
								return
							}
						}
					})
				} else {
					this.plist.forEach((item, index) => {
						if (this.img_id == item.id) {
							this.current = index
							this.info = item
						}
					})
				}
			},
			// 提交，分享
			toShare(obj) {
				console.log(obj);
				this.$emit('TakeNotesId', obj)
			},
			showTips(tips) {
				uni.showToast({
					icon: 'none',
					title: tips
				})
			}
		}
	}
</script>

<style lang="scss">
	.ImageView {

		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 9998;
		top: 0;
		left: 0;
	}

	.imageBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		position: relative;

		.edit {
			// position: fixed;
			z-index: 99;
			// top: 30px;
			// /* #ifdef H5 */
			// top: 100px;
			// /* #endif */
			right: 0;
			margin-top: 150rpx;
			width: 45%;
			padding: 15rpx 18rpx 15rpx 0;
			display: flex;
			justify-content: flex-end;
			// z-index: 9999;
			background-color: #FFFFFF;
			border-top-left-radius: 30px;
			border-bottom-left-radius: 30px;
			// border-top-right-radius: 15rpx;
			// border-bottom-right-radius: 15rpx;

		}

		.top {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;

			.play {
				width: 236rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.marea {
				height: 100%;
				width: 100%;
				position: fixed;
				overflow: hidden;

				.mview {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: auto;
					// min-height: 100%;

					.image {
						width: 100%;
						transform: translate3d(0, 0, 0) scale(1, 1);
					}
				}
			}

		}

		.bottom {
			box-sizing: border-box;
			height: 280rpx;
			padding: 20rpx;
			color: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.1);
			width: 100%;
			overflow-y: scroll;
		}


	}
</style>